<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <p>Vue 版本: {{ vueVersion }}</p>
    </div>

    <script>
        console.log('Vue 对象存在:', typeof Vue !== 'undefined');
        if (typeof Vue !== 'undefined') {
            console.log('Vue 版本:', Vue.version);
        }
        
        const { createApp } = Vue || {};
        
        if (createApp) {
            const app = createApp({
                data() {
                    return {
                        message: 'Vue 3 测试成功!',
                        vueVersion: Vue?.version || '未知'
                    }
                },
                mounted() {
                    console.log('Vue 应用已挂载');
                }
            });
            
            app.mount('#app');
            console.log('应用已挂载到 #app');
        } else {
            console.error('无法创建 Vue 应用');
            document.getElementById('app').innerHTML = '<h1 style="color: red;">Vue 加载失败!</h1>';
        }
    </script>
</body>
</html>